<template>
  <div class="live-header-bar">
    <div v-if="deviceTesting" class="live-device-block">
      <template>
        <!-- 摄像头连接 -->
        <Poptip v-if="hasCameraConnect">
          <div class="device-label">
            {{ camera.label }}
          </div>
          <div class="device-list" slot="content">
            <div
              class="device-item"
              v-for="(item, index) in cameraList"
              :key="item.deviceId"
              :class="{
                'device-item-selected': item.deviceId === camera.deviceId
              }"
              @click.stop.prevent="selectCamera(item.deviceId)"
            >
              <div class="device-label">{{ item.label }}</div>
              <Divider
                v-if="index !== cameraList.length - 1"
                class="device-divider"
              />
            </div>
          </div>
        </Poptip>
        <span v-else>摄像头未连接</span>
      </template>
      <template>
        <!-- 麦克连接 -->
        <Poptip v-if="hasMicConnect">
          <div class="device-label">
            {{ micPhone.label }}
          </div>
          <div class="device-list" slot="content">
            <div
              class="device-item"
              v-for="(item, index) in micPhoneList"
              :key="item.deviceId"
              :class="{
                'device-item-selected': item.deviceId === micPhone.deviceId
              }"
              @click.stop.prevent="selectMic(item.deviceId)"
            >
              <div class="device-label">{{ item.label }}</div>
              <Divider
                v-if="index !== micPhoneList.length - 1"
                class="device-divider"
              />
            </div>
          </div>
        </Poptip>
        <div v-else>
          <span>麦克风未连接</span>
        </div>
      </template>
      <template v-if="!connectResult">
        <Button type="error" @click.stop.prevent="showConnectError = true">
          <Icon type="ios-construct-outline" />Error</Button
        >
      </template>
      <Button @click="deviceTestShow = true">设备检测</Button>
    </div>
    <Modal v-model="showConnectError" title="设备连接错误">
      <div>
        {{ deviceConnectInfo.connectInfo }}
      </div>
      <div v-html="deviceConnectInfo.deviceFailAttention"></div>
      <div v-html="deviceConnectInfo.networkFailAttention"></div>
    </Modal>
    <device-test-modal :visiable.sync="deviceTestShow" />
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import TRTC from "trtc-js-sdk";
import DeviceTestModal from "./components/device-test-modal/index";
export default {
  name: "LiveHeaderBar",
  components: { DeviceTestModal },
  inject: ["live"],
  data() {
    return {
      showConnectError: false,
      deviceTestShow: !localStorage.getItem("byt_device_testing")
    };
  },
  computed: {
    ...mapState("live", ["camera", "micPhone"]),

    deviceTesting({ live }) {
      return live.liveDeviceUtils.deviceTesting === "SUCCESS";
    },

    connectResult({ live }) {
      return live.liveDeviceUtils.connectResult;
    },

    deviceConnectInfo({ live }) {
      return live.liveDeviceUtils.deviceConnectInfo;
    },

    cameraList({ live }) {
      return live.liveDeviceUtils.cameraList;
    },

    micPhoneList({ live }) {
      return live.liveDeviceUtils.micPhoneList;
    },

    hasCameraConnect({ live }) {
      return live.liveDeviceUtils.hasCameraConnect;
    },

    hasMicConnect({ live }) {
      return live.liveDeviceUtils.hasMicConnect;
    }
  },
  methods: {
    ...mapActions("live", ["updateCamera", "updateMicPhone"]),

    /**
     * 选择摄像头
     */
    selectCamera(deviceId) {
      for (let camera of this.cameraList) {
        if (camera.deviceId === deviceId) {
          this.updateCamera({ ...camera });
          break;
        }
      }
    },

    /**
     * 选择麦克风
     */
    selectMic(deviceId) {
      for (let mic of this.micPhoneList) {
        if (mic.deviceId === deviceId) {
          this.updateMicPhone({ ...mic });
          break;
        }
      }
    },

    /**
     * 获取摄像头
     */
    async getCamera() {
      const list = await TRTC.getCameras();
      for (let camera of list) {
        if (!this.camera.deviceId) {
          this.updateCamera(camera);
          break;
        }
      }
    },

    /**
     * 获取麦克风
     */
    async getMicPhone() {
      const list = await TRTC.getMicrophones();
      for (let mic of list) {
        if (!this.micPhone.deviceId) {
          this.updateMicPhone(mic);
          break;
        }
      }
    }
  },

  async created() {
    await this.getCamera();
    await this.getMicPhone();
  }
};
</script>

<style lang="scss">
.live {
  &-header-bar {
    display: flex;
    height: 60px;
    justify-items: center;
    border: solid #ccc;
    border-width: 0 0 1px 0;
    box-sizing: border-box;
    .device-label {
      width: 60px;
      cursor: pointer;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .device-divider {
      margin: 8px 0;
    }
    .device-item-selected {
      color: gray;
      .device-label {
        cursor: default;
      }
    }
  }
  &-device-block {
    display: flex;
    width: 300px;
    margin-left: 100px;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
